<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣app-登录-手机号登录/注册</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/app-public.css">
    <link rel="stylesheet" href="../css/login/login-public.css">
    <link rel="stylesheet" href="../css/login/login-phone.css">
</head>
<body>
    <div class="mobile">
        <div class="logged_in flexBox">
            <div class="functional_domain flexBox">
                <span class="close iconfont">&#xe679;</span>
            </div>
            <div class="main">
                <div class="title">
                    <span>手机号登录/注册</span>
                </div>

                <div class="agreement flexBox">
                    <span class="iconfont checkbox">&#xe657;</span>
                    <span class="content">
                        新手机号将自动注册，已详读并同意
                        <a href="javascript:void(0);">豆瓣使用协议、个人信息保护政策</a>
                    </span>

                    <div class="tip">
                        &#128064;登录前请勾选
                        <span class="sharp"></span>
                    </div>
                </div>

                <div class="loginForm">
                    <div class="username flexBox">
                        <div class="areaCode">
                            <span>+86</span>
                            <span class="iconfont">&#xe661;</span>
                        </div>
                        <div class="input">
                            <input type="text" placeholder="请输入手机号" class="username" data-type="username">
                            <span class="clear iconfont" data-type="clear">&#xe658;</span>
                        </div>
                    </div>
                    <div class="submit">
                        <input type="submit" value="获取验证码" disabled="disabled" data-type="submit">
                    </div>
                </div>

                <div class="verificationCode">
                    <div class="title">
                        <span>输入验证码</span>
                        <span class="phoneNumber">
                            验证码已发送至&nbsp;+86&nbsp;<span>15280159663</span>
                        </span>
                    </div>
                    <div class="codeForm">
                        <input type="text" data-index="1">
                        <input type="text" data-index="2">
                        <input type="text" data-index="3">
                        <input type="text" data-index="4">
                    </div>
                    <div class="countdown flexBox">
                        <span class="time"><span></span>s&nbsp;后重新获取</span>
                        <a href="javascript:void(0);" class="tryAgain">重新获取验证码</a>
                        <a href="javascript:void(0);" class="problem">收不到验证码?</a>
                    </div>
                </div>
            </div>


            <div class="login_tipBox flexBox">
                <div class="wrong">手机号格式错误(5003)</div>
            </div>
        </div>
    </div>

    <script src="../lib/jquery-3.6.1.min.js"></script>
    <script src="../js/login-public.js"></script>
    <script>
        $(function(){
            // 返回上一级按钮
            $('.close').on('click',function(){
                window.history.back();
            })
            
            // 设置提示框的位置
            $('.tip').css('left',$('.checkbox').offset().left-85);


            $('.loginForm').on({
                keyup:function(e){
                    var type = e.target.type;
                    if(type == 'text'){
                        if($(e.target).val()) $('.clear').css('display','block');
                        else $('.clear').css('display','none');
                    }
                    console.log($('.username input').val().length);
                    if($('.username input').val().length >= 3){
                        console.log('can login');
                        $('.submit input').removeAttr('disabled');
                        $('.submit input').addClass('clickable');
                    }
                    else{
                        console.log('can"t login');
                        $('.submit input').attr('disabled','disabled');
                        $('.submit input').removeClass('clickable');
                    }
                },
                click:function(e){
                    var type = e.target.dataset.type;
                    // 清空
                    if(type == 'clear'){
                        $('.username input').val('');
                        $(e.target).css('display','none');
                    }
                    // 获取验证码
                    if(type == 'submit'){
                        // 没勾选协议
                        if($('.checkbox').hasClass('selected') == false){
                            $('.tip').show();
                            tipBoxShow('tip','100%','117%',3000);
                            setTimeout(function(){
                                $('.tip').hide();
                            },3100);
                        }
                        // 勾选协议
                        if($('.checkbox').hasClass('selected')){
                            var username = $('.username input').val();

                            var reg1 = /^[0-9]{11}$/;

                            // 用户名规则判定
                            // 符合 手机号 或 邮箱 的规则 则进行登录判定
                            if(reg1.test(username)){
                                console.log(type);
                                $('.verificationCode').show();
                                $('.verificationCode input:first-child').trigger('focus');
                                
                                // 启动定时器
                                countdown();
                            }
                            else{
                                $('.login_tipBox .wrong').show();

                                tipBoxShow('login_tipBox','5%','10%',3000);

                                setTimeout(function(){
                                    $('.login_tipBox .wrong').hide();
                                },3100);
                            }
                        }
                    }
                }
            })

            $('.verificationCode .countdown .tryAgain').on('click',function(){
                $(this).hide();
                $('.verificationCode span.time').show();
                // 启动定时器
                countdown();
            })
            $('.verificationCode .codeForm input').on('keyup',function(e){
                console.log(e.target.dataset.index);
                if($(e.target).val().length == 1){
                    if(e.target.dataset.index != 4){
                        $(e.target.nextElementSibling).trigger('focus');
                    }
                    else{
                        console.log($('.username input').val());
                        var username = $('.username input').val();

                        $.ajax({
                            type:'post',
                            data:{username},
                            url:'/register',
                            success:function(res){
                                console.log('res',res);
                                if(res.status){
                                    // 注册 或 登录成功
                                    window.location.href = 'http://localhost:3000/index.html';
                                }
                            },
                            error:function(err){
                                console.log('err',err);
                            }
                        })
                    }
                }
            })

            // 倒计时定时器
            function countdown(){
                var minute = 10;
                $('.verificationCode span.time span').html(minute);
                var timer = setInterval(timeBox,1000);
                function timeBox(){
                    minute--;
                    $('.verificationCode span.time span').html(minute);
                    if(minute == 0){
                        $('.verificationCode span.time').hide();
                        $('.verificationCode .countdown .tryAgain').show();
                        clearInterval(timer);
                    }
                }
            }
        })
    </script>
</body>
</html>